<md-dialog aria-label="{{ 'ADMINCONSOLE.DIALOG.EDIT_ACCESS_USAGE.TITLE_ARIA' | translate }}"
           style="max-width: 800px;">
    <form name="vm.accessUsageForm" ng-submit="vm.save()" novalidate style="overflow: initial;" layout-padding>
        <md-dialog-content layout="column" layout-padding>

            <div>
                <h2>{{ 'ADMINCONSOLE.DIALOG.EDIT_ACCESS_USAGE.TITLE' | translate }}</h2>
            </div>


            <div layout="row" layout-xs="column" layout-align="start start" ng-repeat="usage in vm.usageByDay" style="width: 100%;">

                <div flex="70" flex-xs="100" layout="row" layout-align="start start" style="width: 100%; height: 100%; max-height: 35px;">

                    <div flex="45" flex-xs="35" layout="row" layout-align="center center" style="height: 100%;">
                        {{ 'SHARED.PARENTAL_CONTROL.ACCESS_CONTINGENTS.' + usage.label | translate }}
                    </div>

                    <div>
                        <md-input-container md-theme="eBlockerThemeInput" style="margin: 0;">
                            <md-select ng-model="usage.displayHours"  ng-change="vm.onChange(usage)">
                                <md-option ng-repeat="hour in vm.hours" ng-value="hour">
                                    {{ hour }}
                                </md-option>
                            </md-select>
                        </md-input-container>
                    </div>

                    <div flex="30" layout="row" layout-align="center center" style="height: 100%;">
                        {{ 'ADMINCONSOLE.DIALOG.EDIT_ACCESS_USAGE.HOURS' | translate }}
                    </div>
                </div>

                <div flex="auto" layout="row" layout-align="start start" style="width: 100%;height: 100%;">
                    <div flex-offset-xs="35">
                        <md-input-container md-theme="eBlockerThemeInput" style="margin: 0;">
                            <md-select ng-model="usage.displayMinutes" ng-change="vm.onChange(usage)">
                                <md-option ng-repeat="minute in vm.minutes" ng-value="minute">
                                    {{ minute }}
                                </md-option>
                            </md-select>
                        </md-input-container>
                    </div>

                    <div flex="30" layout="row" layout-align="center center" style="height: 100%;">
                        {{ 'ADMINCONSOLE.DIALOG.EDIT_ACCESS_USAGE.MINUTES' | translate }}
                    </div>
                </div>

            </div>

        </md-dialog-content>

        <md-dialog-actions layout="row"
                           layout-align="end center"
                           layout-xs="column"
                           layout-align-xs="center center"
                           style="padding-right: 16px;">
            <md-button type="button" ng-click="vm.cancel()" class="md-raised md-secondary">{{ 'ADMINCONSOLE.DIALOG.EDIT_ACCESS_USAGE.ACTION.CANCEL' | translate }}</md-button>
            <md-button type="submit" class="md-raised md-primary md-accent">{{ 'ADMINCONSOLE.DIALOG.EDIT_ACCESS_USAGE.ACTION.OK' | translate }}</md-button>
        </md-dialog-actions>
    </form>
</md-dialog>
